<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>
<body>




        <div id="app">
            <el-container>
                <!--垂直和水平导航栏-->
                <el-header style="width: 100%;"> <el-menu
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item index="1">体育馆场地预约系统</el-menu-item>
                    <el-menu-item index="3" style="float:right"><a href="adminLogin.jsp" target="_blank" >退出登录</a></el-menu-item>
                    <li style="float:right "><h5 style="color: #eeeeee;height: 5px;margin-top: 20px" v-model="adminname"> 管理员,{{adminname}},欢迎您！</h5></li>
                    <div style="height: 1px;float:right" >
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
                    </div>
                </el-menu></el-header>
                <el-container>
                    <el-aside width="200px"style="height: 650px"><el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            style="width: 100%;height:100%"
                            :inline="true">
                        <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>场地管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" >场地信息</el-menu-item>
                            <el-menu-item index="2-2" @click="addField()">增加场地</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" @click="toUserManage()">用户信息</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>公告管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1" @click="toNoticeManage">公告信息</el-menu-item>
                                <el-menu-item index="3-2">新增公告</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>评论管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="4-1" @click="toCommentManage()">评论信息</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>预约管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="5-1" @click="toFieldBookManage()">场地预约信息</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu></el-aside>

                    <!--所有场地表格-->
                    <el-main>
                      <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item><a href='admin.html'>后台管理</a></el-breadcrumb-item>
                            <el-breadcrumb-item>场地管理</el-breadcrumb-item>
                          <el-button type="primary" icon="el-icon-delete" @click="isDeleteByIds()">批量删除</el-button>
                        </el-breadcrumb>

                        <el-table
                            ref="multipleTable"
                            :data="fieldData"
                            tooltip-effect="dark"
                            style="float:left;width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                type="index"
                                width="50">
                        </el-table-column>
                            <el-table-column
                                    prop="fieldname"
                                    label="场地名称"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="fieldincharge"
                                    label="负责人"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="fieldlocation"
                                    label="场地位置"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="fieldinformation"
                                    label="场地信息"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="fieldstate"
                                    label="场地状态"
                                    width="120">
                            </el-table-column>

                        <el-table-column
                                prop="fieldpicture"
                                label="场地图片"
                                show-overflow-tooltip>
                            <template   slot-scope="scope">
                                <img :src="'imgs/'+scope.row.fieldpicture"  min-width="80" height="80" />
                            </template>
                        </el-table-column>
                            <el-table-column
                                    prop="showstate"
                                    label="展示状态（1：展示 0：隐藏）"
                                    width="120">
                            </el-table-column>

                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-button @click="reviseField(scope.row)" type="text" size="small">修改</el-button>
                                <el-button type="text" size="small"@click="deleteField(scope.row)">删除</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                        </table></el-main>
                </el-container>
            </el-container>
<!--添加场地的表单-->
            <el-dialog
                    title="添加场地"
                    :visible.sync="AddFielddialogVisible"
                    width="40%"
            >
            <el-form ref="form" :model="fieldform" label-width="80px">
                <el-form-item label="场地名称">
                    <el-input v-model="fieldform.fieldname" ></el-input>
                </el-form-item>
                <el-form-item label="场地负责人">
                    <el-input v-model="fieldform.fieldincharge"></el-input>
                </el-form-item>
              <!--  <el-form-item label="场地状态">
                    <el-select v-model="fieldform.fieldstate" placeholder="请选择场地状态">
                        <el-option label="空闲" value="空闲"></el-option>
                        <el-option label="使用中" value="使用中"></el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item label="上传场地图片">
                    <el-col :span="11">
                        <el-upload
                                class="upload-demo"
                                ref="upload"
                                name="file"
                                action="http://localhost:8080/FieldBookSystem/addField"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :on-success="handleSuccess"
                                :file-list="fieldform.fileList"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        </el-upload>
                    </el-col>
                </el-form-item>
                <el-form-item label="场地位置">
                    <el-radio-group v-model="fieldform.fieldlocation">
                        <el-radio label="体育馆三层" value="体育馆三层"></el-radio>
                        <el-radio label="体育馆二层" value="体育馆二层"></el-radio>
                        <el-radio label="体育馆一层" value="体育馆一层"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="场地信息">
                    <el-input type="textarea" v-model="fieldform.fieldinformation"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">添加场地</el-button>
                </el-form-item>
            </el-form>
            </el-dialog>
            <!--更新场地的表单-->
            <el-dialog
                    title="更新场地信息"
                    :visible.sync="updateFielddialogVisible"
                    width="40%"
            >
                <el-form ref="form" :model="updatefieldform" label-width="80px">
                    <el-form-item label="场地名称">
                        <el-input v-model="updatefieldform.fieldname" ></el-input>
                    </el-form-item>
                    <el-form-item label="场地负责人">
                        <el-input v-model="updatefieldform.fieldincharge"></el-input>
                    </el-form-item>
                    <el-form-item label="场地状态">
                        <el-select v-model="updatefieldform.fieldstate" placeholder="请选择场地状态">
                            <el-option label="空闲" value="空闲"></el-option>
                            <el-option label="使用中" value="使用中"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上传场地图片">
                        <el-col :span="11">
                            <el-upload
                                    class="upload-demo"
                                    ref="upload"
                                    name="file"
                                    action="http://localhost:8080/FieldBookSystem/addField"
                                    :on-preview="handlePreviewUpdate"
                                    :on-remove="handleRemoveUpdate"
                                    :on-success="handleSuccessUpdate"
                                    :file-list="updatefieldform.fileList"
                                    :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            </el-upload>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="展示状态">
                        <el-radio-group v-model="updatefieldform.showstate">
                            <el-radio label="0" value="0"></el-radio>
                            <el-radio label="1" value="1"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="场地位置">
                        <el-radio-group v-model="updatefieldform.fieldlocation">
                            <el-radio label="体育馆三层" value="体育馆三层"></el-radio>
                            <el-radio label="体育馆二层" value="体育馆二层"></el-radio>
                            <el-radio label="体育馆一层" value="体育馆一层"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="场地信息">
                        <el-input type="textarea" v-model="updatefieldform.fieldinformation"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitUpdate">更新场地</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>




        </div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>


<script>
    new Vue({
        el: "#app",

        mounted(){
            this.selectAllField();
            this.getAdminName();

        },
        methods: {
            //获得登录的管理员姓名
            getAdminName(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getLoginAdmin",
                    method:"get"
                }).then(function (resp){
                    _this.adminname=resp.data;
                })
            },
            //跳转到公告管理
            toNoticeManage(){
                window.location.href="adminNoticeManage.html";

            },
            //跳转到评论管理
            toCommentManage(){
                window.location.href="adminCommentManage.html";
            },
            //跳转到用户管理页面
            toUserManage(){
                window.location.href="adminUserManager.html"
            },
            //跳转到场地预约管理页面
            toFieldBookManage(){
                window.location.href="adminBookManage.html"
            },
            //根据ID删除
            deleteField(row){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/deleteById?fieldid="+row.fieldid,
                    method:"get",
                }).then(function (resp){
                    if(resp.data=="delete_suc") {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.selectAllField();
                    }

                })


            },
            //批量删除前的判断
            isDeleteByIds(){
                this.$confirm('此操作将永久删除所有信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteByIds();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //批量删除场地信息
            deleteByIds(){
                var _this = this;
                for(let i=0;i<this.multipleSelection.length;i++){
                    let selection = this.multipleSelection[i];
                    this.selectIds[i] = selection.fieldid;
                }
                axios({
                    url:"http://localhost:8080/FieldBookSystem/deleteByIds",
                    method:"post",
                    data:_this.selectIds
                }).then(function (resp){
                    if(resp.data=="delete_suc") {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.selectAllField();
                    }

                })


            },
            //复选框选中后更新复选框选中的内容
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            //提交成功后
            handleSuccessUpdate(file) {
                this.fieldform.fieldpicture=file.name;

            },
            //移除文件
            handleRemoveUpdate(file, fileList) {
                console.log(file, fileList);
            },
            //文件预览
            handlePreviewUpdate(file) {
                this.updatefieldform.fieldpicture=file.name;
            },
            //提交修改的场地信息
            onSubmitUpdate(){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/updateField",
                    method:"post",
                    data:_this.updatefieldform
                }).then(function (resp){
                        if(resp.data=="update_suc") {
                            _this.$message({
                                message: '更新成功',
                                type: 'success'
                            });
                            _this.updateFielddialogVisible = false;
                            _this.selectAllField();
                        }
                        if(resp.data=="wrong_adminname"){
                                _this.$message({
                                    message: '管理员不存在',
                                    type: 'warning'
                                });
                        }

                })
            },
            //更新场地的对话框
            reviseField(row){
                this.updateFielddialogVisible=true;
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getUpdateField?fieldid="+row.fieldid,
                    method:"get"
                }).then(function (resp){
                    _this.updatefieldform=resp.data;
                })

            },
            //提交新增场地表单
            onSubmit() {
                var _this = this;
                console.log('submit!');
                axios({
                    url:"http://localhost:8080/FieldBookSystem/addField",
                    method:"post",
                    data:_this.fieldform
                }).then(function (resp){
                    if(resp.data=="add_suc") {
                        _this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        _this.AddFielddialogVisible = false;
                        _this.selectAllField();
                    }
                    if(resp.data=="not_all") {
                        _this.$message({
                            message: '请填写完整',
                            type: 'warning'
                        });
                    }
                        if(resp.data=="wrong_adminname"){
                            _this.$message({
                                message: '无此管理员信息，请重新填写',
                                type: 'warning'
                            });
                    }

                })
            },
            //查询所有场地
            selectAllField(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectAllField",
                    method:"get"
                }).then(function (resp){
                    _this.fieldData=resp.data;
                })
            },
            //提交成功后
            handleSuccess(file) {
                this.fieldform.fieldpicture=file.name;
                alert(file.name);

            },
            //移除文件
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //文件预览
            handlePreview(file) {
                console.log(file);
                this.fieldform.fieldpicture=file.name;
            },
            //新增场地的方法
            addField(){
                this.AddFielddialogVisible=true;
                this.fieldform={};
            },
            /*导航栏展开方法*/
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            /*导航栏展开方法*/



        },
        data() {
            return {
                //登录的管理员模型
                adminname:'',
                //导航栏模型
                activeIndex: '1',
                activeIndex2: '1',
                //场地表格模型
                fieldData: [],
                //复选框模型
                multipleSelection: [],
                //添加场地模型
                fieldform: {
                    fieldname:'',
                    fieldincharge:'',
                    fieldinformation:'',
                    fieldlocation:'',
                    fieldstate:'',
                    //场地图片上传
                    fieldpicture: '',
                    fileList:[],
                },
                //更新场地模型
                updatefieldform: {},

                //添加场地弹窗显示状态
                AddFielddialogVisible:false,
                //更新场地弹窗显示状态
                updateFielddialogVisible:false,
                //批量删除的ids
                selectIds:[],

            };
        }

            })

</script>

</body>
</html>